<%--
  Created by IntelliJ IDEA.
  User: xin
  Date: 2021/12/22
  Time: 23:31
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单详情</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<style>
    /**{margin: 0;padding: 0;}*/
    /*ol li{list-style: none;}*/
    /*a{text-decoration: none;}*/
    /*body{min-width:1000px }*/
    /*.box{background-color:white;height: 560px;}*/
    /*.box .main{height:100%;width: 80%; float: left;}*/
    /*.box .main h1{font-size: 100px; text-align: center;padding-top: 196px ;margin: 0}*/
    /*.main table{width: 100%;text-align: center;}*/
    /*.main table thead{width:100%;display: block;}*/
    /*.main table tbody{width:100%;display: block;height:360px;overflow: scroll}*/
    /*.main table tbody::-webkit-scrollbar{display:none}*/
    .main table tbody tr td button{padding:3px;margin: 0;border-radius: 5px}
    .main table tbody tr{height:29px;width: 100%;display: block;border-top: 2px solid #eee;}
    /*.main>table tbody tr:hover{background-color:rgba(0,0,0,.3);}*/
    .main table thead tr{width: 100%;display: block}
    .main table tbody tr td{width:16%;display: block;float: left;margin-bottom: 2px;}
    .main table thead tr th{width:16%;display: block;float: left}
    /*.outbox{position: absolute;width: 100%;height:560px; display: none;background-color: rgba(0,0,0,.3);}*/
    /*.outbox .Form{width:600px;margin-top:200px;margin-left: 250px;background-color: white;border: 1px solid #000;border-radius: 5px;text-align:center;}*/
    /*.outbox .Form .input{ width: 50%;margin-bottom: 10px;}*/

</style>
<script>
    function quit(box){
        box.style.display = "none";

    }
    function updateButtonClick(id,name,PAC,address,phone){
        let updateBox=document.getElementById("updateBox");
        updateBox.style.display = "block";
        let updateForm=document.getElementById("updateForm");
        updateForm.children.namedItem("id").value=id;
        updateForm.children.namedItem("name").value=name;
        updateForm.children.namedItem("PAC").value=PAC;
        updateForm.children.namedItem("address").value=address;
        updateForm.children.namedItem("tel").value=phone;
    }
</script>
<body>
<jsp:include page="header.jsp"/>
<div class="box">
    <jsp:include page="nav.jsp"/>
    <div class="main">
        <div id="updateBox" class="outbox">
            <form action="${pageContext.request.contextPath}/toUpdateOrder" class="Form" id="updateForm">
                <h2 style="text-align: center">修改订单收货信息</h2>
                订单编号：<input type="text" name="id" class="input" readonly>
                <br>
                收件人名：<input type="text" name="name" class="input">
                <br>
                收件地址：<input type="text" name="PAC" class="input" >
                <br>
                详细地址：<input type="text" name="address" class="input">
                <br>
                收件电话：<input type="tel" name="tel" class="input">
                <br>
                <input type="submit" value="确认">
                <input type="reset" value="退出" onclick="quit(updateBox)">
            </form>
        </div>
        <div id="detailBox" style="text-align: center">
            <table id="detailTable" >
                <thead>
                    <tr>
                        <th style="width:30%;display: block;">基本详情</th>
                        <th style="width:30%;display: block;">收货详情</th>
                        <th style="width:30%;display: block;">支付详情</th>
                    </tr>
                </thead>
                <tr>
                    <c:set var="order" value="${sessionScope.orderDetail}">
                    </c:set>
                    <c:if test="${order != null}">
                        <td style="width:30%;text-align: left">
                            <ol>
                                <li>订单编号：${order.orderId}</li>
                                <li>商品编号：${order.commodityId}</li>
                                <li>商品个数：${order.commodityNumber}</li>
                                <li>商品单价：${order.price}</li>
                                <li>下单时间：${order.closingDate}</li>
                            </ol>
                        </td>
                        <td style="width:30%;text-align: left">
                            <ol>
                                <li>收货人：${order.consigneeName}</li>
                                <li>地址：${order.consigneePAC}</li>
                                <li>详情地址：${order.consigneeAddress}</li>
                                <li> 联系电话：${order.consigneePhone}</li>
                                <li> 联系传真：${order.consigneeFax}</li>
                            </ol>
                        </td>

                        <td style="width:30%;text-align: left">
                            <ol>
                                <li>银行卡类型：${order.cardType}</li>
                                <li> 银行卡号码：${order.cardNumber}</li>
                                <li> 运费：￥<fmt:formatNumber type="number" value="${order.freight*order.commodityNumber}" maxFractionDigits="2"/></li>
                                <li>商品税：￥<fmt:formatNumber type="number" value="${order.price*order.commodityNumber*order.taxRate}" maxFractionDigits="2"/></li>
                                <li> 实付：￥<fmt:formatNumber type="number" value="${(order.price*order.commodityNumber)+(order.price*order.commodityNumber*order.taxRate)+(order.freight*order.commodityNumber)}" maxFractionDigits="2"/></li>
                            </ol>
                        </td>
                    </c:if>
                </tr>
            </table>
            <button onclick="updateButtonClick(`${order.orderId}`,`${order.consigneeName}`,`${order.consigneePAC}`,`${order.consigneeAddress}`,`${order.consigneePhone}`)">修改</button>
            <button onclick="window.history.back()" >返回</button>
        </div>
    </div>
</div>
<jsp:include page="footer.jsp"/>
</body>
</html>
